<template>
    <div>
    <el-menu background-color="rgb(48, 65, 86)"
             text-color="#fff"
             active-text-color="#ffd04b"
             default-active="1-4-1"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             router
             :collapse="$store.state.isCollapse"

            >
        <el-menu-item >
            <span slot="title" style="font-size: 18px">考试系统</span>
        </el-menu-item>

        <el-menu-item disabled index="1">
            <i class="el-icon-menu"></i>
            <span slot="title" >控制台</span>
        </el-menu-item>
        <el-submenu index="2">
            <span slot="title" style="font-size: 18px">在线考试</span>
            <el-menu-item index="/studentHome/tableMain"style="font-size: 8px" >在线考试</el-menu-item>
            <el-menu-item index="/studentHome/gradesList" style="font-size: 8px">我的成绩</el-menu-item>
        </el-submenu>
<!--        <el-submenu index="3" v-if="$store.state.userInfo.ranked==0?false:true">-->
        <el-submenu index="3" >
            <span slot="title" style="font-size: 18px">考试管理</span>
            <el-menu-item disabled index="/studentHome/questionBank" style="font-size: 8px" >题库管理</el-menu-item>
            <el-menu-item index="/studentHome/topicList" style="font-size: 8px">试题管理</el-menu-item>
            <el-menu-item disabled index="/studentHome/gradesList"style="font-size: 8px" >考试管理</el-menu-item>
        </el-submenu>
<!--        <el-submenu index="4" v-if="$store.state.userInfo.ranked==2?true:false">-->
        <el-submenu index="4" >
            <span slot="title" style="font-size: 18px">系统设置</span>
            <el-menu-item disabled index="/studentHome/tableMain" >部门管理</el-menu-item>
            <el-menu-item disabled index="/studentHome/gradesList" >角色管理</el-menu-item>
            <el-menu-item index="/studentHome/userManage" >用户管理</el-menu-item>
        </el-submenu>


    </el-menu>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 100vh;
        position: fixed;
    }

</style>
